<template>
  <div>
  <!-- 面包屑导航 -->
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>商品管理</el-breadcrumb-item>
    <el-breadcrumb-item>分类参数</el-breadcrumb-item>
  </el-breadcrumb>
  <!-- 卡片区域 -->
  <el-card>
    <!-- 头部警告区 -->
    <el-alert title="注意：只允许为第三级分类设置相关参数！" type="warning" show-icon :closable="false">
    </el-alert>
    <!-- 选择商品分类区 -->
    <el-row class="cat_opt">
       <el-col>
           <span>选择商品分类：</span>
           <!-- 选择商品级联选择 -->
            <el-cascader
             v-model="selectionw"
             :options="cateList"
              expand-trigger="hover"
             :props="cascaderProps"
             @change="handleChangeo"
              clearable >
            </el-cascader>
       </el-col>
    </el-row>
    <!-- 标签页 -->
    <el-tabs v-model="activeName" @tab-click="handTabsleClick">
     <!-- 动态参数区    -->
    <el-tab-pane label="动态参数" name="many">
          <el-button type="primary" size="small" :disabled="isdiable">动态参数</el-button>
          <!-- 动态参数表格区 -->
          <el-table :data="manyTableDate" border stripe>
          <!-- 展开行 -->
          <el-table-column type="expand"></el-table-column>
          <!-- 索引列 -->
          <el-table-column type="index" label="#"></el-table-column>
          <el-table-column label="参数名称" prop="attr_name"></el-table-column>
          <el-table-column label="操作">
              <template slot-scope="scope">
                 <!-- 编辑按钮 -->
                 <el-button type="primary" size="mini" icon="el-icon-edit" >编辑</el-button>
                 <!-- 删除按钮 -->
                 <el-button type="danger" size="mini" icon="el-icon-delete">删除</el-button>
              </template>
          </el-table-column>
          </el-table>
    </el-tab-pane>


    <!-- 静态属性区 -->
    <el-tab-pane label="静态属性" name="only">
          <el-button type="primary" size="small" :disabled="isdiable">静态属性</el-button>
          <!-- 静态参数表格区 -->
          <el-table :data="onlyTableDate" border stripe>
          <!-- 展开行 -->
          <el-table-column type="expand"></el-table-column>
          <!-- 索引列 -->
          <el-table-column type="index" label="#"></el-table-column>
          <el-table-column label="属性名称" prop="attr_name"></el-table-column>
          <el-table-column label="操作">
              <template slot-scope="scope">
                 <!-- 编辑按钮 -->
                 <el-button type="primary" size="mini" icon="el-icon-edit" >编辑</el-button>
                 <!-- 删除按钮 -->
                 <el-button type="danger" size="mini" icon="el-icon-delete">删除</el-button>
              </template>
          </el-table-column>
          </el-table>
    </el-tab-pane>
  </el-tabs>
  </el-card>
  </div>
</template>
<script>
export default {
    data(){ 
        return{
            // 商品分类列表
            cateList:[],
            //选中的父级分类id数组
            selectionw:[],
            cascaderProps:{
              //对应的值
              value:'cat_id',
              //显示的标题
              label:'cat_name',
              //子父级嵌套de属性
              children:'children'
            },
            //默认显示动态参数
            activeName:"many",
            //动态参数的数据
            manyTableDate:[],
            //静态参数的数据
            onlyTableDate:[],
        }
    },
    created(){
        this.getCateList();
    },
    computed:{
        // 如果按钮需要被禁用，则返回true,否则返回false
        isdiable(){
            if(this.selectionw.length!==3){
                return true
            }
                return false
        },
        //当前选中的三级分类id
        cateId(){
            if(this.selectionw.length===3){
                //索引为2，也就是最后一项
                return this.selectionw[2]
            }
            return null
        }
    },
    methods:{
        async getCateList(){
            const {data:res} = await this.$http.get("categories");
            if(res.meta.status!==200){
                return this.$message.error('获取参数失败!')
            }
                this.cateList=res.data;
                // console.log(this.cateList);
        },
        // 监听级联选择器选择等级的事件
        handleChangeo(){
            this.getParamsDate();
        },
        //tab点击事件处理函数
        handTabsleClick(){
            this.getParamsDate();
            console.log(this.activeName,"========1111111111=====")
        },
        //获取参数列表数据
        async getParamsDate(){
            //证明不是选的三级，我们就默认无法选中，即清空
           if(this.selectionw.length!==3){
              this.selectionw=[]
              return
           }
           //证明选中的是三级分类
           console.log(this.selectionw);
           //根据所选分类的id,和当前所处的面板，获取对应的参数
           const {data:res}=await this.$http.get(`categories/${this.cateId}/attributes`,{
               params:{sel:this.activeName}
           })
           if(res.meta.status!==200){
               return this.$message.error('获取参数列表失败！')
           }
           console.log(res.data,"~~~~1111111111~~~~~~~~~~")
           //判断到底是哪个页面
           if(this.activeName==="many"){
               this.manyTableDate=res.data;
               
           }else{
               this.onlyTableDate=res.data;
             
           }
           //判断页面清空
           
        }
    }
}
</script>

<style lang="less" scoped>
.cat_opt{
    margin: 15px 0px;
}
</style>